<template>
  <div class="appinfo-container">
    <div class="appinfo-title">请填写您的店铺信息</div>
    <el-form :model="appinfo" label-width="80px" class="appinfo-form" label-position="right">
      <el-form-item label="商品类目">
        <el-select v-model="appinfo.shop_category_id" placeholder="请选择商品类目" style="width:250px">
          <el-option :label="item.name" :value="item.id" v-for="item in shopTypeList" :key="item.id"></el-option>
          <el-option label="123" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺名称" prop="name">
        <el-input v-model="appinfo.name" placeholder="请输入店铺名称" style="width:250px"></el-input>
      </el-form-item>
      <el-form-item label="店铺地址" prop="area">
        <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width:250px" placeholder="请选择省市区"></el-cascader>
      </el-form-item>
      <el-form-item label="" prop="address">
        <el-input v-model="appinfo.address" placeholder="请输入详细地址" style="width:250px"></el-input>
      </el-form-item>
      <el-form-item label="店铺logo" prop="pic">
        <el-upload :auto-upload="false" list-type="picture" action="#" :show-file-list="false" :on-change="imgChange" ref='upload' 
          style="width:100px;height:100px;border: 1px dashed #d9d9d9;border-radius:6px;margin:0 40px">
          <img v-if="appinfo.pic_url!=''" :src="appinfo.pic_url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <!-- <el-button type="primary" plain slot="trigger" style="padding:8px 20px"><i class="el-icon-upload2" style="font-weight:600"/><span style="margin-left:5px;font-weight:600">上传图片</span></el-button> -->
        </el-upload>
        <div style="color:#909399;font-size:12px;margin:0 50px;text-align:left">支持jpg,png格式</div>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" @click="onSubmit" class="submit-button">创 建 店 铺</el-button>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { merchantSHopCategor, merchantPay } from '@/api/app'

export default {
  data () {
    return {
      options: regionData,
      selectedOptions: [],
      appinfo:{
        name:'',
        pic_url:'',
        app_id: 2,
        combo_id: 2,
        category_id: 2,
        shop_category_id: '',
        address:'',
        area: ''
      },
      shopTypeList: [],
      formRules: {
        name:[{ required:true, message:'请输入店铺名称', trigger: 'blur' }],
        area:[{ required:true, message:'请选择店铺地址', trigger: 'blur' }],
        address:[{ required:true, message:'请填写店铺详细地址', trigger: 'blur' }],
        pic:[{ required:true, message:'请上传店铺logo', trigger: 'blur' }]
      }
    }
  },

  
  mounted(){
    //获取商店类型列表
    merchantSHopCategor().then(response => {
      if(response.status==200){
        this.shopTypeList = response.data;
        this.appinfo.shop_category_id = this.shopTypeList[0].id;
      }else{
        this.$message.error(response.message);
      }
    })
  },

  methods: {
    onSubmit() {
      merchantPay(this.appinfo).then(response => {
        if(response.status === 200){
          this.$message.success(response.message);
          this.$router.push({ path: '/' })
        }else{
          this.$message.error(response.message);
        }
      })
    },
    handleChange (areaCodeList) {
      areaCodeList.forEach(element => {
        this.area += CodeToText[element];
      });
    },
    imgChange(file){
      const reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        this.appinfo.pic_url = event.target.result;
      };
    }
  }
}
</script>

<style lang="css" scoped>
.appinfo-container{
  height: 570px;
  width: 460px;
  padding: 35px 60px;
  box-sizing: border-box;
  border-radius: 5px;
  margin: 100px auto;
  text-align: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.appinfo-title{
  font-size: 20px;
  /* font-family: 'Hiragino Sans GB'; */
  font-weight: 600;
  letter-spacing: 2px;
  color:#536DFF;
}
.appinfo-form{
  padding: 30px 0 0 0;
  width: 100%;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 6px;
}
.avatar-uploader{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.submit-button{
  padding: 10px 50px;
  font-size: 15px;
}
</style>